<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<title></title>
	<style>
		html,body{
			height:100%;
		}
		#container{
			position: relative;
			height:auto;
			
		}
		.wrap{
			position: absolute;
			width: 20%;
			height: auto;
			z-index: 100;
		}
		img{
			display: block;
			width:100%;
			cursor:pointer;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="wrap">
			<img src="coat1.jpg" alt="" data-url="coat1.js" data-position="1">
			<img src="coat2.jpg" alt="" data-url="coat2.js" data-position="1">
		</div>
	</div>
	<script src="js/three.min.js"></script>
	<script>
	
	

		// 场景
		var scene = new THREE.Scene();


		// 相机
		var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,20000);
		

		// 渲染器
		var renderer = new THREE.WebGLRenderer({antialias:true});
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.domElement.style.position = 'absolute';
		renderer.domElement.style.zIndex = 3;
		renderer.domElement.style.top = 0;
		document.getElementById('container').appendChild(renderer.domElement);

		

		// 添加墙体

		function createWall(imgUrl, rotationAngle, axial, repeat, position, scale){
			var floorMat = new THREE.MeshStandardMaterial( {
				//roughness: 0.8,
				color: 0xffffff,
				metalness: 0.2,
				bumpScale: 0.0005,
				side: THREE.DoubleSide
			});
			var textureLoader = new THREE.TextureLoader();
			textureLoader.load( imgUrl, function( map ) {
				map.wrapS = THREE.RepeatWrapping;
				map.wrapT = THREE.RepeatWrapping;
				map.anisotropy = 4;
				map.repeat.set( repeat, repeat );
				floorMat.map = map;
				floorMat.needsUpdate = true;
			} );
			var plane = new THREE.Mesh(new THREE.PlaneGeometry(100,100), floorMat);
			plane.rotation[axial] = rotationAngle;
			plane.position.copy(position);
			plane.scale.set(scale.x,scale.y,scale.z);
			scene.add(plane);
		}

		createWall('floor.jpg',-Math.PI/2,'x',10,new THREE.Vector3(0,0,0),{x:1,y:1,z:1});		//低
		createWall('back.jpg',0,'x',1,new THREE.Vector3(0,20,-20),{x:0.5,y:0.5,z:0.5});			//后
		createWall('left.jpg',Math.PI/2,'y',1,new THREE.Vector3(-20,20,0),{x:0.5,y:0.5,z:0.5});	//左
		createWall('front.jpg',0,'x',1,new THREE.Vector3(0,20,20),{x:0.5,y:0.5,z:0.5});			//前
		createWall('right.jpg',Math.PI/2,'y',1,new THREE.Vector3(20,20,0),{x:0.5,y:0.5,z:0.5});	//右

		// 光
		var ambient = new THREE.AmbientLight( 0xffffff,0.3 );
		scene.add( ambient );
		var light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
		light.position.set( 0, 50, -30 );
		light.target.position.set( 0, 0, 0 );
		scene.add( light );
		
		

		var DirectionalLight = new THREE.DirectionalLight(0xffffff,0.6);
		DirectionalLight.position.set( 50, 200, 180 );
		scene.add(DirectionalLight);

		
		
		camera.position.set(0,7,19);


		var coat1,coat2,body;
		var items = [//模拟一个数组堆栈
						[],
						[],
						[],
						[],
						[],
						[],
						[],
						[],
						[],
						[]
					];
		load('girl1.js');
		// load('coat1');
		// load('coat2');
		/*加载模型*/
		function load(url, position, img){
			
			var loader = new THREE.JSONLoader(), mesh;
			loader.load(url,function(geometry, materials){
				geometry.computeVertexNormals();// 计算顶点法线产生平滑效果
				mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials));
				mesh.position.set(-1.7,6,0);
				mesh.scale.set(0.02,0.02,0.02);
				
				scene.add(mesh);
				switch(url){
					case 'girl1.js':
						body = mesh;
						mesh.position.set(-3.0,12,0);
						
						break;
					case 'coat1.js':
						coat1 = mesh;
						mesh.position.set(0.05,0.04,-0.15);
						break;
					case 'coat2.js':
						coat2 = mesh;
						mesh.position.set(-7.9,0.022,-0.00);
						break;
				}
				
				if(url != 'girl1.js'){
					items[position].push({mesh:mesh, url:url});
					img.mesh = mesh;
					
				}
				

			});
		}

		/*点击换衣服*/
		Array.prototype.slice.call(document.getElementsByTagName('img'),0).forEach(function(item, index){
			
			item.addEventListener('touchstart',function(e){
				var url = this.getAttribute('data-url');
				var position = this.getAttribute('data-position');
				if(items[position].length == 1){
					if(url == items[position][0].url){

					}else{
						items[position][0].mesh.visible = false;
						
						items[position].pop();
						if(this.mesh){
							this.mesh.visible = true;
							items[position].push({mesh:this.mesh, url:url});
						}else{
							console.log(position);
							load(url, position, this);
						}
					}
				}else{
					
					load(url, position, this);
				}
				
			});
		});

		function changeClothes(event,item){
			for(var i = 0, len = items.length; i < len; i++ ){
				items[i].visible = false;
			}
			items[item].visible = true;
		}


		/*屏幕滑动人物旋转*/
		var origin;
		renderer.domElement.addEventListener('touchstart',function(e){
		 	var old = e.touches[0].pageX;
		 	this.addEventListener('touchmove',function(e){
		 		e.preventDefault();
		 		origin = e.touches[0].pageX - old;
		 		this.addEventListener('touchend',function(){
		 			origin = undefined;
		 		});
		 	});
		 });

		

		
		
		

		
		render();
		function render(){
			requestAnimationFrame(render);
			if(origin !== undefined){

				scene.rotation.y = origin*0.01;
			}
			
			renderer.render(scene, camera);
			
		}

		
	</script>

	
</body>
</html>